<template>
   <pageTabelLayout>
    <template #pageHeader>
      <div class="my-header">
        <div class="search-form isheader" v-if="headerShow">
          <div>
            <a-form size="mini" :model="queryData" layout="inline">
              <a-form-item label="所属公司">
                <a-cascader v-model="queryData.firmId" :options="gsDatas" allow-clear class="bacClass"
                  @click="getAllActiveCompany" @change="queryClearChange" :style="{ width: '160px' }" popup-container="html"/>
              </a-form-item>
              <a-form-item label="仓库名称">
                <a-select popup-container="html"  class="bacClass" :style="{ width: '160px' }" :loading="loading" :filter-option="false"
                  allow-search allow-clear v-model.trim="queryData.warehouseName" @click="handleSearchs">
                  <a-option v-for="item in pageData.warehouseName" :value="item.warehouseName">{{
                    item.warehouseName
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-form>
          </div>
          <div class="my-tool-bar">
            <Toolbar :items="[
              `${permissionStore.hasPermisson('cklx.cx') ? '查询' : ''}`,
              `${permissionStore.hasPermisson('cklx.xz') ? '新增' : ''}`,
              `${permissionStore.hasPermisson('cklx.sc') ? '删除' : ''}`,
              `${permissionStore.hasPermisson('cklx.dc') ? '导出' : ''}`]" @add="addHandler" @del="deleteHandler"
              @select="selectHandler" @export="exports">
            </Toolbar>
          </div>
        </div>
        <div class="my-divisders">
          <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
          </a-divider>
        </div>
        <!-- <div class="my-tool-bar">
                      <Toolbar :items="['查询', '新增', '删除', '导出']" @add="addHandler" @del="deleteHandler"
                          @select="selectHandler" @export="exports">
                      </Toolbar>
                  </div> -->
      </div>
      <div class="gang"></div>
    </template>

    
    <template #pageTabel>
    <a-spin :loading="pageData.pageLoading" style="width: 100%; height: 100%">
      <!-- <a-table :style="{ height: '100%' }" size="mini" @page-change="pagination.change" stripe :bordered="true"
                  :columns="tableColumns" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                  v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
                  :pagination="pagination" :rowKey="rowKey">
                  <template #edit="{ record }">
                      <a-space>
                          <a-button type="primary" size="small" status="warning" @click="editHandler(record)">
                              <template #icon>
                                  <icon-edit />
                              </template>
                              修 改
                          </a-button>
                      </a-space>
                  </template>
              </a-table> -->
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
        @grid-ready="gridReady" style="height: calc(100% - 45px);"
 @columnResized="onColumnResized" @columnMoved="onColumnMoved"
        @columnVisible="onColumnVisible" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="table.dataList"
        :columnDefs="tc" :localeText="localeText1">
      </AgGridVuesCopys>
      <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
        @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
        :current="page" />
    </a-spin>
  </template>
  <a-drawer ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false" :width="400"
    :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="sideNo">
    <template #title>
      {{ pageData.sideTitle }}
    </template>
    <div>
      <!-- 所属工厂 仓库名称 联系人 联系电话 地址 -->
      <a-form ref="formRef" :model="dataForm">
        <a-form-item label="所属工厂" field="firmId" :rules="[{ required: true, message: '所属工厂必填' }]" label-col-flex="80px">
          <a-cascader :disabled="pageData.sideTitle == '修改出库类型'" :options="pageData.corporateList" ref="corporateRef"
            @change="corporateChange" v-model="dataForm.firmId" allow-clear class="bacClass"
            :loading="pageData.corporateLoading" popup-container="html"/>
        </a-form-item>
        <a-form-item label="仓库名称" field="tg" :rules="[{ required: true, message: '仓库名称必填' }]" label-col-flex="80px">
          <a-select popup-container="html"  v-if="pageData.sideTitle != '修改出库类型'" placeholder="" class="bacClass" v-model="dataForm.tg"
            @search="changes2($event)" allow-search allow-clear>
            <a-option v-for="(item, Index) in cklxTable" :key="Index" :value-key="Index" :label="item.warehouseName"
              :value="item.warehouseName + '-' + item.id"></a-option>
          </a-select>
          <a-select popup-container="html"  v-else disabled placeholder="" class="bacClass" v-model="dataForm.tg">
            <a-option v-for="(item, Index) in cklxTable" :key="Index" :value-key="Index" :label="item.warehouseName"
              :value="item.warehouseName + '-' + item.id"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="出库类型" field="typeName" :rules="[{ required: true, message: '类型必填' }]"
          :validate-trigger="['change', 'blur']" label-col-flex="80px">
          <a-input class="bacClass" placeholder="" v-model.trim="dataForm.typeName" />
        </a-form-item>
        <!-- <a-form-item label="编号" field="typeCode" :rules="[{ validator: isChiese }, { required: true, message: '编号必填' }]"
          label-col-flex="80px">
          <a-input class="bacClass" placeholder="" @blur="inputBlur" v-model.trim="dataForm.typeCode" />
        </a-form-item> -->
        <a-form-item label="备注" field="remark" label-col-flex="80px">
          <a-textarea class="bacClass" v-model="dataForm.remark" :max-length="400" allow-clear show-word-limit />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <ModalDialog :mask-closable="false" ref="qrModal" title="仓库二维码" @confirm="gbModal">
    <template #content>
      <a-space direction="vertical">
        <a-button type="primary" @click="print">打印</a-button>
        <div id="outbound">
          <QrcodeVue :value="qrData.code"></QrcodeVue>
          <div style="display: inline-block; vertical-align: top; margin-left: 15px">
            <span>工厂名称 {{ qrData.gcName }}</span>
            <br />
            <span>仓库名称 {{ qrData.ckName }}</span>
          </div>
        </div>
      </a-space>
    </template>
  </ModalDialog>
</pageTabelLayout>
</template>

<script lang="ts">
import axios from 'axios'
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import QrcodeVue from 'qrcode.vue'
import printJS from 'print-js'
import { ModalDialogType } from '@/types/components'
import { localeText } from '@/api/aggridZw'
import { ref, reactive, onMounted, toRefs, defineComponent } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import ModalDialog from '@/components/ModalDialog.vue'

import usePermission from '@/store/modules/permission'
import { pagingList } from '@/api/paging'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { slicing } from '@/utils/caseFrimAndSecRig'
interface Firm {
  name: string
  id: number
}
interface Cloth {
  code: string
}
interface InboundhInfo {
  id: any
  firm: any
  typeName: any
  remark: any
  deleteState: any
  createName: any
  createTime: any
  updateName: any
  updateTime: any
  obsoleteState: any
  warehouseId: any
  warehouseName: any
  code: any
  tg: any
  // typeCode: any
  firmId: Number
}
export default {
  name: 'OutboundType',
  setup() {
    const permissionStore: any = usePermission()
    const total = ref(10)
    const page = ref(1)
    const size = ref(10)
    function PageSize(val: any) {
      page.value = val
      doRefresh()
    }
    function change1(val: any) {
      size.value = val
      doRefresh()
    }
    function doRefresh() {
      pageData.pageLoading = true
      updateGridState01()
      post({
        url: 'wms/stockoutType/getStockoutTypePage',
        data: {
          page: page.value,
          size: size.value,
          firmId: queryData.firmId,
          warehouseName: queryData.warehouseName
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            table.handleSuccess(data.list)
            gridOption.value.setRowData(data.list)
            pagination.setTotalSize(data.total)
            total.value = data.total
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false
        })
    }
    const validateIdCheck = (value: any, callback: any) => {
      if (typeof value !== 'number') {
        callback('id为数字')
      }
    }
    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    const pagination = usePagination(doRefresh)
    const table = useTable()
    const rowKey = useRowKey('id')
    //假数据后期需要修改
    const dataList = reactive({
      list: [
        {
          id: 1,
          code: 1,
          mercery_name: '掌紫元',
          remark: 'WH22101800000002',
          remark_1: '裁断中仓',
          remark_2: '佛山',
          remark_3: '勇哥',
          remark_4: '110',
        },
      ],
    })
    let qrModal = ref<ModalDialogType | null>(null)
    const qrData = reactive({
      ckName: '',
      gcName: '',
      code: '',
    })
    const openQRcode = (item: any) => {
      qrData.gcName = item.mercery_name
      qrData.ckName = item.remark_1
      qrData.code = JSON.stringify({
        id: item.id,
        firm: encodeURI(item.remark),
        warhouse: encodeURI(item.remark),
        code: item.code,
      })
      qrModal.value?.toggle()
    }
    // 序号	所属工厂	仓库编码	仓库名称	仓库地址	联系人	联系电话	操作
    const tableColumns = useTableColumn([
      {
        title: '类型序号',
        key: 'typeCode',
        dataIndex: 'typeCode',
        width: 150,
      },
      {
        title: '公司',
        key: 'firm',
        dataIndex: 'firm',
        width: 150,
      },
      {
        title: '出库类型',
        key: 'typeName',
        dataIndex: 'typeName',
        width: 150,
      },
      {
        title: '所属仓库',
        key: 'warehouseName',
        dataIndex: 'warehouseName',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
      },
      {
        title: '创建人',
        key: 'createName',
        dataIndex: 'createName',
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        width: 200,
      },
      {
        title: '修改人',
        key: 'updateName',
        dataIndex: 'updateName',
        width: 150,
      },
      {
        title: '修改时间',
        key: 'updateTime',
        dataIndex: 'updateTime',
        width: 200,
      },
      {
        title: '操作',
        key: 'edit',
        dataIndex: 'edit',
        slotName: 'edit',
        width: 150,
        fixed: 'right',
      },
    ])
    const pageData: any = reactive<{
      gcList: Firm[]
      clothList: Cloth[]
      showAdd: boolean
      sideTitle: string
      typeName: []
      typeCode: []
      pageLoading: any
      rHeight: any
      corporateList: any[]
      corporateLoading: boolean,
      warehouseName: any[]
    }>({
      gcList: [],
      clothList: [],
      showAdd: false,
      sideTitle: '新增布料基础资料',
      typeName: [],
      typeCode: [],
      pageLoading: false,
      rHeight: 0,
      corporateList: [],
      corporateLoading: false,
      warehouseName: []
    })

    let gsData = ref([])
    let corporateRef = ref('')
    //公司change事件
    const corporateChange = (event: any) => {
      nextTick(() => {
        dataForm.firm = slicing(corporateRef.value.selectViewValue[0].label)
        changes(event)
      })
    }
    // 获取公司列表
    const getCorporateList = async () => {
      try {
        pageData.corporateLoading = true
        const res = await post({ url: 'org/baCompany/getTreeCompanyByUser' })
        if (res.code == 200) {
          pageData.corporateList = res.data
          return
        }
        Message.error(res.message)
      } catch (error: any) {
        pageData.corporateLoading = false
      } finally {
        pageData.corporateLoading = false
      }
    }
    onMounted(() => {
      doRefresh()
      getCorporateList()
      pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
      //弹出层的高
      if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight - 100
      }
    })
    const queryData = reactive({
      typeCode: '',
      typeName: '',
      firmId: undefined,
      warehouseName: '',
    })

    const cklxTable: any = ref<any[]>([])
    const addHandler = () => {
      queryData.typeCode = ''
      queryData.typeName = ''
      pageData.showAdd = true
      pageData.sideTitle = '新增出库类型'
      for (let item in dataForm) {
        dataForm[item] = ''
      }
    }
    const changes = (val: any) => {
      post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: {
          firmId: val,
          virtuallyState: 0
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          cklxTable.value = data
        }
      })
    }
    const changes2 = (val: any) => {
      post({
        url: 'wms/warehouse/getFieldValue2',
        data: {
          firmId: dataForm.firmId,
          warehouseName: val
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          cklxTable.value = data
        }
      })
    }
    const dataForm = reactive<InboundhInfo>({
      id: '',
      firm: '',
      typeName: '',
      remark: '',
      deleteState: '',
      createName: '',
      createTime: '',
      updateName: '',
      updateTime: '',
      obsoleteState: '',
      warehouseId: '',
      warehouseName: '',
      code: '',
      tg: '',
      typeCode: '',
      firmId: 0,
    })
    const formRef = ref<FormInstance>()
    const sideOk = () => {
      formRef.value?.validate().then((err) => {
        if (!err) {
          if (pageData.sideTitle == '新增出库类型') {
            dataForm.warehouseName = dataForm.tg.split('-')[0]
            dataForm.warehouseId = dataForm.tg.split('-')[1]
            let dataForms1 = {
              firmId: dataForm.firmId,
              firm: dataForm.firm,
              warehouseName: dataForm.warehouseName,
              warehouseId: Number(dataForm.warehouseId),
              typeName: dataForm.typeName,
              // typeCode: dataForm.typeCode,
              remark: dataForm.remark,
            }
            post({
              url: 'wms/stockoutType/addStockoutType',
              data: [dataForms1],
            }).then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields()
                doRefresh()
                pageData.showAdd = false
                Message.success({
                  content: '添加成功',
                  duration: 5000,
                })
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                })
              }
            })
          } else if (pageData.sideTitle == '修改出库类型') {
            let dataForms1 = {
              id: dataForm.id,
              firmId: dataForm.firmId,
              firm: dataForm.firm,
              warehouseName: dataForm.warehouseName,
              warehouseId: Number(dataForm.warehouseId),
              typeName: dataForm.typeName,
              // typeCode: dataForm.typeCode,
              remark: dataForm.remark,
            }
            post({
              url: 'wms/stockoutType/updateStockoutType',
              data: [dataForms1],
            }).then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields()
                doRefresh()
                pageData.showAdd = false
                Message.success({
                  content: '修改成功',
                  duration: 5000,
                })
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                })
              }
            })
          }
        }
      })
    }
    const sideNo = () => {
      formRef.value?.resetFields()
      pageData.showAdd = false
    }
    let id = 0
    const editHandler = (key: any) => {
      // post({
      //   url: 'org/firmGroup/getFirmInfoByMap',
      //   data: {},
      // }).then((res) => {
      //   if (res.code == 200) {
      //     gsDatas.value = res.data
      //   }
      // })
      dataForm.id = key.id
      dataForm.firm = key.firm.split('-')[key.firm.split('-').length - 1]
      dataForm.warehouseId = key.warehouseId
      dataForm.tg = key.warehouseName
      dataForm.warehouseName = key.warehouseName
      // dataForm.typeCode = key.typeCode
      dataForm.typeName = key.typeName
      dataForm.firmId = key.firmId
      dataForm.remark = key.remark
      post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: {
          firm: key.firm,
          virtuallyState: 0
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          cklxTable.value = data
        }
      })
      id = key.id
      pageData.showAdd = true
      pageData.sideTitle = '修改出库类型'
    }
    const deleteHandler = () => {
      if (gridOption.value.getSelectedRows().length === 0) {
        return
      }
      let wouseAarry: any = []
      gridOption.value.getSelectedRows().forEach((item: any) => {
        wouseAarry.push({
          id: item.id,
        })
      })
      Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk() {
          // console.log(selectedRowKeys.value.values)
          post({
            url: 'wms/stockoutType/delStockoutType',
            data: wouseAarry,
          }).then(({ code, data }: any) => {
            if (code === 200) {
              doRefresh()
              Message.success({
                content: '删除成功',
                duration: 5000,
              })
            } else {
              Message.success({
                content: '删除失败',
                duration: 5000,
              })
            }
          })
        },
      })
    }
    const print = () => {
      printJS({
        printable: 'outbound',
        type: 'html',
        targetStyles: ['*'],
      })
    }
    const gbModal = () => {
      qrModal.value?.toggle()
    }
    const selectHandler = () => {
      page.value = 1
      doRefresh()
    }

    // const inputBlur = () => {
    //   dataForm.typeCode = dataForm.typeCode.toUpperCase()
    // }
    const options = ref<any>(pageData.typeName)
    const options1 = ref<any>(pageData.typeCode)
    const loading = ref(false)
    const loading1 = ref(false)
    const handleSearch = (value: any) => {
      if (value) {
        const ob = { typeName: value }
        loading.value = true
        window.setTimeout(() => {
          selCxAll(ob)
          options.value = pageData.typeName
          loading.value = false
        }, 100)
      } else {
        options.value = []
      }
    }
    const handleSearch1 = (value: any) => {
      if (value) {
        const ob = { typeCode: value }
        loading1.value = true
        window.setTimeout(() => {
          selCxAll1(ob)
          options1.value = pageData.typeCode
          loading1.value = false
        }, 100)
      } else {
        options.value = []
      }
    }
    function selCxAll(val: any) {
      post({
        url: 'wms/stockoutType/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          pageData.typeName = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    function selCxAll1(val: any) {
      post({
        url: 'wms/stockoutType/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          pageData.typeCode = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    const handleSearch1s = () => {
      post({
        url: 'wms/stockoutType/getFieldValue',
        data: {
          typeCode: '',
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          pageData.typeCode = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    const handleSearchs = () => {
      if (queryData.firmId == undefined || queryData.firmId == '') {
        pageData.warehouseName = []
        Message.warning('请先选择公司')
        return
      }
      post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: {
          firmId: queryData.firmId,
          virtuallyState: 0
        }
      }).then((res: any) => {
        if (res.code == 200) {
          pageData.warehouseName = res.data
        } else {
          Message.error(res.message)
        }
      })
    }

    const exports = () => {
      if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //将表头拼接出来
        let head =
          '<th>公司</th><th>类型编号</th><th>入库类型</th><th>所属仓库</th><th>备注</th><th>创建人</th><th>创建时间</th><th>修改人</th><th>修改时间</th>'
        //拿到当前表格数据与勾选的行做筛选

        let nowRow = table.dataList.filter(function (o) {
          return (
            gridOption.value
              .getSelectedRows()
              .map((o: any) => {
                return o.id
              })
              .indexOf(o['id']) !== -1
          )
        })
        let body = ''
        nowRow.forEach(function (o) {
          body += '<tr><td>' + o['firm'] + '</td>'
          body += '<td>' + o['typeCode'] + '</td>'
          body += '<td>' + o['typeName'] + '</td>'
          body += '<td>' + o['warehouseName'] + '</td>'
          body += '<td>' + o['remark'] + '</td>'
          body += '<td>' + o['createName'] + '</td>'
          body += '<td>' + o['createTime'] + '</td>'
          body += '<td>' + o['updateName'] + '</td>'
          body += '<td>' + o['updateTime'] + '</td>'
          body += '</tr>'
        })
        tableToXlsx(head, '出库类型', body)
        console.log(table)
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
        template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

      const a = document.createElement('a')
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
      a.download = filename
      a.click()
      document.removeChild(a)
    }
    const isChiese = (value: string, cb: Function) => {
      return new Promise<void>((resolve) => {
        if (window.encodeURI(value).indexOf('%') !== -1) {
          cb('填写的值不能包含中文！')
        }
        resolve()
      })
    }
    const headerShow = ref<boolean>(true)
    let gsDatas = ref<any[]>([]);
    // 获取公司下拉框
    const getAllActiveCompany = () => {
      post({
        url: 'org/baCompany/getTreeCompanyByUser',
        data: {},
      }).then((result: any) => {
        if (result.code === 200) {
          gsDatas.value = result.data
        } else {
          Message.error(result.message)
        }
      })
    }

    const queryClearChange = () => {
      pageData.warehouseName = [];
      queryData.warehouseName = '';
    }

    const gridOption = ref()
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
    }
    let tc: any[] = tableColumns.map((o: any) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
      }
      if (o.slotName === 'edit') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['width'] = 120
        obj['cellRenderer'] = {
          template: `
                    <a-space>
                        <a-space>
                            <a-button v-if="e" type="primary" size="small" status="warning" @click="a1">
                            <template #icon>
                                <icon-edit />
                            </template>
                            修 改
                        </a-button>
                    </a-space>
                            </a-space>

                    `,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            const a1 = () => {
              editHandler(props.params.data)
            }
            return {
              a1,
              isDtas,
              e: permissionStore.hasPermisson('cklx.xg')
            }
          },
        }
      }
      return obj
    })

    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tc = a.concat(tc)
    const localeText1: any = ref(localeText)
    const pagingList1: any = ref(pagingList)
    const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('OutboundType-1', gridOption, colState, tc)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    const onColumnVisible = () => {
      saveGridState01()
    }
    return {
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      onColumnVisible,
      colState,
      pagingList1,
      localeText1,
      change1,
      PageSize,
      total,
      page,
      size,
      tc,
      getCorporateList,
      corporateRef,
      corporateChange,
      defaultColDef,
      gridReady,
      gridOption,
      getAllActiveCompany,
      queryClearChange,
      gsDatas,
      isChiese,
      handleSearchs,
      handleSearch1s,
      exports,
      handleSearch1,
      handleSearch,
      loading,
      loading1,
      options,
      options1,
      // inputBlur,
      selectHandler,
      gbModal,
      print,
      dataList,
      editHandler,
      sideNo,
      deleteHandler,
      sideOk,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      tableColumns,
      table,
      rowKey,
      pageData,
      queryData,
      qrModal,
      qrData,
      openQRcode,
      validateIdCheck,
      cklxTable,
      changes,
      gsData,
      headerShow,
      permissionStore,
      changes2
    }
  },
  components: { Toolbar, QrcodeVue, ModalDialog,  },
}
</script>
<style scoped lang="less">
.selectCc {
  width: 100%;
  text-align: right;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>